<script setup>

import {onMounted, ref} from "vue";
import {approveLeave, getLeaveList} from "@/api/leave.js";

const leaveList = ref([]);

onMounted(() => {
  getLeaveListRequest();
})

const pageData = ref({
  page: 1,
  size: 10,
  total: 0,
});

const getLeaveListRequest = async () => {
  const result =await getLeaveList(pageData.value);
  leaveList.value = result.data.records;
  pageData.value.total = result.data.total
  pageData.value.page = result.data.current
  pageData.value.size = result.data.size
}

const handleClick = async (id) => {
  await approveLeave({
    leaveId: id,
    status: 1,
  });
  await getLeaveListRequest();
}

const handleCurrentChange = (page) => {
  pageData.value.page = page;
  // 在这里可以触发数据加载逻辑
  console.log('当前页码:', page);
  getLeaveListRequest()
};

</script>

<template>
  <div>
    <el-table :data="leaveList" style="width: 100%">
      <el-table-column prop="leaveId" label="编号" width="60" />
      <el-table-column prop="username" label="申请人" width="120" />
      <el-table-column prop="startDate" label="开始时间" />
      <el-table-column prop="endDate" label="结束时间" />
      <el-table-column prop="type" label="申请类型" width="120">
        <template #default="scope">
          <span v-if="scope.row.type === 0" style="color: blue">病假</span>
          <span v-else-if="scope.row.type === 1" style="color: green">事假</span>
          <span v-else style="color: orange">年假</span>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="申请原因" />
      <el-table-column prop="status" label="审批状态" width="120">
        <template #default="scope">
          <span v-if="scope.row.status === 0" style="color: red">待审批</span>
          <span v-else style="color: green">已批准</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button v-if="scope.row.status === 0" type="text" @click="handleClick(scope.row.leaveId)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; text-align: center">
      <el-pagination
          :page-size="pageData.size"
          :total="pageData.total"
          :current-page="pageData.page"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
      />
    </div>
  </div>
</template>

<style scoped>

</style>
